<template>
    <div>
        <h1>代办事项列表</h1>
        <input type="text" v-model="newTodo" />
        <button @click="addTodo">添加</button>
        <ul>
            <li v-for="todo in filteredTodos" :key="todo.id">
                <span :class="{'completed': todo.completed}">{{ todo.text }}</span>
                <button @click="markCompleted(todo)">完成</button>
            </li>
        </ul>
        <div>
            <button @click="filtedStatus('all')">全部</button>
            <button @click="filtedStatus('completed')">已完成</button>
            <button @click="filtedStatus('uncompleted')">未完成</button>
        </div>
    </div>
</template>
<script>
import { computed, ref } from 'vue';


export default {
    setup() {
    
        const newTodo = ref('');
        const todos = ref([]);
        const filterStatus = ref('all');
        const addTodo = () => {
            if (newTodo.value.trim()) {
                const newId = todos.value.length + 1;
                const newTodoItem = {
                    id: newId,
                    text: newTodo.value,
                    completed: false
                };
                todos.value.push(newTodoItem);
                newTodo.value = '';
            }
        };
        const markCompleted = (todo) => {
            todo.completed = !todo.completed;
        };
        const filtedStatus = (status) => {
            filterStatus.value = status;
        };
        const filteredTodos = computed(() => {
            if (filterStatus.value === 'all') {
                return todos.value;
            } else if (filterStatus.value === 'completed') {
                return todos.value.filter(todo => todo.completed);
            } else if (filterStatus.value === 'uncompleted') {
                return todos.value.filter(todo => !todo.completed);
            }
        });
        return {
            newTodo,
            todos,
            filterStatus,
            addTodo,
            markCompleted,
            filtedStatus,
            filteredTodos
        }
    },
}
</script>